<%--
  Created by IntelliJ IDEA.
  User: 29754
  Date: 2021/3/22
  Time: 21:43
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath %>"/>
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        //加载数据网格菜单
        $(function () {
            $("#roleTable").datagrid({
                url:"role/roleInfo",//设置远程加载数据的地址
                pagination:true,//在表格中显示分页工具栏，将此属性设置为true，就会发送ajax分页请求获取要加载的数据
                rownumbers:true,//显示行号
                pageNumber:1,//设置ajax分页查询的默认页码数
                pageSize:2,//设置每页显示的数量
                checkOnSelect:false,//设置点击行的任意位置不会选择该行，只有点击复选框时菜单选择
                pageList:[2,4,6],//设置每页数据量下拉框框中的数据
                title:"查询结果",//显示标题
                toolbar:"#roleToolBar",//增加工具栏效果
                columns:    //设置表格的列以及每列和加载的数据的映射关系
                    [[
                        {field:"aa",checkbox:true},//每列显示一个多选框的效果
                        {title:"角色编号",field:"rid",width:200},//表示一列，并且设置该列和数据的映射关系
                        {title:"角色名称",field:"rname",width:200},
                        {title:"角色描述",field:"rdesc",width:200},

                    ]]
            })
        })
        //为增加角色按钮进行方法书写
        $(function () {
            $("#addRole").click(function () {
                $("#addRoleDialog").dialog('open');
                $("#RoleTree").tree('expandAll');
                //刷新异步树
                var root = $("#flushRoleTree").tree("getChecked");
                $("#flushRoleTree").tree("uncheck",root.target);
            })
            $("#addRoleBtn").click(function () {
                var tree = $("#RoleTree").tree("getChecked","checked");
                //定义一个数组，存储众多的角色菜单id，最后存储在form表单中
                var ids ='';
                for (var i in tree){
                    //给角色增加角色菜单的时候，可能有多个菜单
                    ids += tree[i].id+",";
                }
                //开始进行form表单的发送
                $("#addRoleForm").form("submit",{
                    url:"role/addRoleAndRoleMenu?mid="+ids,
                    success:function (data) {
                        eval("var d="+data);
                        if (d.success){
                            $.messager.alert("提示",d.message);
                            $("#addRoleDialog").dialog('close');
                            $("#roleTable").datagrid('reload');
                        }else {
                            $.messager.alert("提示",d.message);
                        }
                    }
                })
            })
        })
        //给更新菜单按钮增加相应的事件
        $(function () {
            $("#flushRole").click(function () {
                $("#flushRoleDialog").dialog('open');
                $("#flushRoleTree").tree("expandAll");
                //查看是否选择了要更新的角色，是否多选了角色
                var datagrid = $("#roleTable").datagrid("getChecked");
                if (datagrid.length>1){
                    //表明选择了多行
                    $.messager.alert("提示","只能选择一个角色");
                }else if (datagrid.length==0){
                    //表明尚未选择
                    $.messager.alert("提示","请选择一个角色");
                }else {
                    //开始进行更新,更新前需要回显数据，分别回显表单和异步树的数据
                    //表单数据存储在datagrid中，而异步树需要在后端查看，并返回，且在原有异步树的前提下，选择回显的菜单
                    $("#flushRoleDialog").dialog('open');
                    //1，回显表单数据
                    $("#flushRid").val(datagrid[0].rid);
                    $("#flushRname").val(datagrid[0].rname);
                    $("#flushRdesc").val(datagrid[0].rdesc);
                    //在这里要发起一个Ajax请求，用于获取角色对应的菜单id
                    //刷新异步树，将之前回显的进行删除
                    var root = $("#flushRoleTree").tree("getRoot");
                    $("#flushRoleTree").tree("uncheck",root.target);
                    $.post("roleMenu/selMenuId",{"rid":datagrid[0].rid},function (data) {
                        for (var i in data){
                            var node = $("#flushRoleTree").tree("find",data[i].mid);
                            console.log(node);
                            $("#flushRoleTree").tree("check",node.target);
                        }
                    })
                }

            })
        })
        //给完成更新按钮添加方法
        $(function () {
            $("#flushRoleBtn").click(function () {
                var tree = $("#flushRoleTree").tree("getChecked","checked");
                //定义一个数组，存储众多的角色菜单id，最后存储在form表单中
                var ids ='';
                for (var i in tree){
                    //给角色增加角色菜单的时候，可能有多个菜单
                    ids += tree[i].id+",";
                }
                console.log(ids);
                //开始进行form表单的发送
                $("#flushRoleForm").form("submit",{
                    url:"role/flushRoleAndRoleMenu?mid="+ids,
                    success:function (data) {
                        eval("var d="+data);
                        if (d.success){
                            $.messager.alert("提示",d.message);
                            $("#flushRoleDialog").dialog('close');
                            $("#roleTable").datagrid('reload');
                        }else {
                            $.messager.alert("提示",d.message);
                        }
                    }
                })
            })
        })
    //    为删除角色按钮，增加相应的方法
        $(function () {
            $("#deleteRole").click(function () {
                    //查看是否选择了要删除的角色，可以选择多个进行删除
                    var datagrid = $("#roleTable").datagrid("getChecked");
                    if (datagrid.length==0){
                        //表明尚未选择
                        $.messager.alert("提示","请选择要删除的角色");
                    }else {
                        //只需要获取点击的角色的rid即可，可能有多个，要进行重组传递的参数
                        var rid = '';
                        for (var i in datagrid){
                            rid+=datagrid[i].rid+',';
                            console.log(rid);
                        }
                        //在这里要发起一个Ajax请求，用于获取角色对应的菜单id
                        $.post("role/deleteRole",{"rid":rid},function (data) {
                            eval("var d="+data);
                            if (d.success){
                                $.messager.alert("提示",d.message);
                                $("#roleTable").datagrid('reload');
                            } else {
                                $.messager.alert("提示",d.message);
                            }
                        })
                    }

                })
        })
    </script>
</head>
<body>
<div id="p" class="easyui-panel" title="角色管理"
     style="width:98%;height:98%;padding:10px;background:#fafafa;">
<%--创建角色数据网格--%>
    <table id="roleTable"></table>
</div>
<div id="roleToolBar">
    <a id="addRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加角色</a>
    <a id="flushRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">更新角色</a>
    <a id="deleteRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">删除角色</a>
</div>
<%--新建一个增加角色对话框--%>
<div id="addRoleDialog" class="easyui-dialog" closed="true" title="新增角色" style="width:800px;height:500px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true">
<%--在里面新建一个布局--%>
    <div id="addRoleLayout" class="easyui-layout" style="width:98%;height: 99%">
<%--        这里东部显示进行选择角色的菜单--%>
        <div data-options="region:'east',title:'选择角色的菜单',split:true" collapsible="false" style="width:30%;">
<%--           动态显示异步树，并且设置复选框--%>
                 <ul id="RoleTree" class="easyui-tree" data-options="url:'menu/menuInfoALL'" checkbox="true"></ul>

        </div>
<%--    这里中部显示填写的新增角色的属性form表单--%>
        <div data-options="region:'center',title:'请输入要增加的角色信息'" collapsible="false" style="padding:1px;background:#eee;width: 69%">
            <form id="addRoleForm" method="post">
                <div style="margin-top: 90px;margin-left: 180px">
                    角色名称：<input id="rname" name="rname"  type="text"style="height: 30px"/>
                </div>
                <div style="margin-top: 20px;margin-left: 180px">
                    角色描述：<input id="rdesc" name="rdesc" type="text" style="height: 30px"/>
                </div>
                <div style="margin-top: 20px;margin-left: 180px">
                    <a id="addRoleBtn" href="javascript:void (0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="height: 30px">
                        完成增加
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
<%--新建一个更新角色对话框--%>
<div id="flushRoleDialog" class="easyui-dialog" closed="true" title="新增角色" style="width:800px;height:500px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true">
    <%--在里面新建一个布局--%>
    <div id="flushRoleLayout" class="easyui-layout" style="width:98%;height: 99%">
        <%--        这里东部显示进行选择角色的菜单--%>
        <div data-options="region:'east',title:'选择角色的菜单',split:true" collapsible="false" style="width:30%;">
            <%--           动态显示异步树，并且设置复选框--%>
            <ul id="flushRoleTree" class="easyui-tree" data-options="url:'menu/menuInfoALL'" checkbox="true"></ul>

        </div>
        <%--    这里中部显示填写的新增角色的属性form表单--%>
        <div data-options="region:'center',title:'请输入要增加的角色信息'" collapsible="false" style="padding:1px;background:#eee;width: 69%">
            <form id="flushRoleForm" method="post">
                <%--                隐藏要进行更新的角色rid--%>
                <input id="flushRid" name="rid" type="hidden"/>
                <div style="margin-top: 90px;margin-left: 180px">
                    角色名称：<input id="flushRname" name="rname"  type="text"style="height: 30px"/>
                </div>
                <div style="margin-top: 20px;margin-left: 180px">
                    角色描述：<input id="flushRdesc" name="rdesc" type="text" style="height: 30px"/>
                </div>
                <div style="margin-top: 20px;margin-left: 180px">
                    <a id="flushRoleBtn" href="javascript:void (0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="height: 30px">
                        完成更新
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
